<template>
	<view>
		<u-navbar class="nav" :is-back="false" :background="background" height="350" :border-bottom='false'>
			<view class="slot-wrap">
				<!-- <image src="../../static/image/getVip/backWhite.png" class="back" @tap="backFun"></image> -->
				<text class="title">我的会员</text>
				<view class="box">
					<image src="../../static/image/successPay/wancheng.png" mode="" class="rightImg"></image>
					<text class="text1">支付成功</text>
					<text class="text2">已支付￥{{salePrice}}</text>
					<view class="imgBox">
						<image src="../../static/image/successPay/wanchengtupian.png"></image>
					</view>
					<text class="text3">立即分享 领取豪礼</text>
					<button type="default" class='btn1 btn'>立即分享</button>
					<button type="default" class='btn2 btn' @tap='backHome'>返回首页</button>
				</view>

			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: 'url(../../static/image/successPay/di.png) no-repeat',
					backgroundSize: 'contain'
				},
				salePrice:0
			}
		},
		methods: {
			backFun() {
				uni.navigateBack({})
			},
			backHome(){
				console.log(123);
				uni.switchTab({
					url:'../index/index'
				})
			}
		},
		onLoad(options){
			this.salePrice=options.salePrice
			// console.log(options.salePrice)
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 750rpx;
			height: 624rpx;
		.slot-wrap {
			.back {
				position: absolute;
				top: 20rpx;
				left: 40rpx;
				width: 50rpx;
				height: 50rpx;

			}

			.title {
				position: absolute;
				top: 20rpx;
				left: 300rpx;
				font-size: 36rpx;
				color: #fff;
			}



			.box {
				margin-top: 500rpx;
				width: 750rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.rightImg {
					width: 96rpx;
					height: 96rpx;
				}

				.text1 {
					margin-top: 28rpx;
					font-size: 36rpx;
					color: #fff;
					font-weight: bold;
				}

				.text2 {
					margin-top: 20rpx;
					font-size: 32rpx;
					color: #ffbe70;
				}

				.text3 {
					margin-top: 56rpx;
					font-size: 40rpx;
				}

				.imgBox {
					margin-top: 16rpx;
					width: 314rpx;
					height: 314rpx;
					background: url(../../static/image/successPay/zhingjia%20.png) no-repeat;
					background-size: contain;
					position: relative;

					image {
						width: 250rpx;
						height: 250rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -125rpx;
						margin-left: -125rpx;
					}
				}

				.btn {
					margin-top: 48rpx;
					width: 542rpx;
					height: 90rpx;
					border-radius: 45rpx;
					font-size: 36rpx;
					
				}

				.btn1 {
					color: #fff;
					background-color: #ff931e;
				}

				.btn2 {
					background-color: #fff;
					border: 1rpx solid #ff931e;
					color: #ff931e;
				}
			}
		}

	}
</style>
